<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<style>
    table{background-color: red;}
    tr td{width: 20px;height: 20px;background-color: yellow;}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<table>
<script>

    var x=9;//宽度
    var y=9;//高度
    var shu=20;//雷数
    var lei=new Array();//雷的位置
   //循环出随机雷的位置
    for(var l=0;l<shu;l++){
        var c=Math.floor(Math.random()*parseInt(String(x)+y));
        lei[l]=c;
    }


    for(var i=1;i<x;i++){
        document.write('<tr>');
        for(var s=1;s<y;s++){
            //如果这个位置是雷 显示*
            if(xunhuan(String(i) + String(s))){
                document.write('<td value="*"></td>');
            }else{
                //不是累就显示 周围的雷数
                document.write('<td value="'+leishu(i,s)+'"></td>');

            }

        }
        document.write('</tr>');


    }
    //判断一个坐标是不是雷
    function xunhuan(xy){

       if(jQuery.inArray(parseInt(xy), lei)!=-1){
           return true;
       }else{
           return false;
       }
    }
    //判断一个坐标的 上下左右的坐标
    function leishu(i,s){
        var shu=0;
        //上边
        if((i-1)>=1){
            if(xunhuan(String(i-1)+s)){
                shu+=1;
            }
        }
        //下边
        if((i+1)<y){
            if(xunhuan(String(i+1)+s)){
                shu+=1;
            }
        }
        //左边
        if((s-1)>=1){
            if(xunhuan(String(i)+(s-1))){
                shu+=1;
            }
        }
        //右边
        if((s+1)<x){
            if(xunhuan(String(i)+(s+1))){
                shu+=1;
            }
        }
        //左上
        if((i-1)>=1 && (s-1)>=1){
          if(xunhuan(String(i-1)+String(s-1))){
              shu+=1;
          }
        }
        //右上
        if((i-1)>=1 && (s+1)<x){
            if(xunhuan(String(i-1)+String(s+1))){
                shu+=1;
            }
        }
        //左下
        if((i+1)<y && (s-1)>=1){
            if(xunhuan(String(i+1)+String(s-1))){
                shu+=1;
            }
        }
        //右下
        if((i+1)<y && (s+1)<x){
            if(xunhuan(String(i+1)+String(s+1))){
                shu+=1;
            }
        }

        return shu;
    }
    $(function(){
        $("table").on("click","td", function () {
           $val=$(this).attr("value");
            if($val=='*'){
                $(this).text('雷');
            }else{
                $(this).text($val);
            }

        });
    });

</script>
</table>

</body>


</html>
